<script setup lang="ts">
import { reactive, ref } from 'vue';

interface Emits {
  (e: 'clickConfirm', cellAttribute: any, cellIndex: string): void
}

const emit = defineEmits<Emits>();
const formRef = ref();
const state = reactive({
  showDialog: false,
  cellIndex: '',
  range: {} as any,
  typeList: [
    {
      value: 'text',
      label: '文本'
    },
    {
      value: 'numeric',
      label: '数字'
    },
    {
      value: 'password',
      label: '密码'
    },
    {
      label: '自动完成',
      value: 'autocomplete'
    },
    {
      value: 'checkbox',
      label: '复选框'
    },
    {
      value: 'date',
      label: '日期'
    },
    {
      value: 'dropdown',
      label: '下拉列表'
    }
  ],
  ruleForm: {
    content: '',
    readonly: null as any,
    type: null as any,
  },
  autocompleteFlag: false,
  sourceValue: '',
  autocompleteMap: {
    source: [] as string[],
    strict: false
  },
  checkBoxMap: {
    label: {
      position: 'after',
      value: ''
    }
  },
  dateMap: {
    dateFormat: ''
  },
  rules: {

  }
});

const openDialog = (
    {
      cell,
      originalData,
      readOnlyCellsData,
      cellTypeListData
    }: any
) => {
  state.showDialog = true;
  state.cellIndex = '';
  state.range = cell.options[0];
  const { row: startRow, col: startCol} = state.range.start;
  const { row: endRow, col: endCol} = state.range.end;
  if (startRow === endRow && startCol === endCol) {
    resetMapData();
    // 回显单元格属性
    state.ruleForm.content = originalData[startRow][startCol];
    state.ruleForm.readonly = readOnlyCellsData.includes(startRow + '-' + startCol);
    const cellType = cellTypeListData.find((item: App.CellTypeItem) => item.row === startRow && item.col === startCol);
    state.cellIndex = startRow + '-' + startCol;
    state.ruleForm.type = cellType?.type || 'text';
    if (['dropdown', 'autocomplete'].includes(state.ruleForm.type)) {
      state.autocompleteMap.source = cellType.source;
      if (state.ruleForm.type === 'autocomplete') {
        state.autocompleteMap.strict = cellType.strict;
      }
    }
    if (state.ruleForm.type === 'checkbox') {
      state.checkBoxMap.label.position = cellType.label.position;
      state.checkBoxMap.label.value = cellType.label.value;
    }
    if (state.ruleForm.type === 'date') {
      state.dateMap.dateFormat = cellType.dateFormat;
    }
  }
};
const resetMapData = () => {
  state.autocompleteMap = {
    source: [],
    strict: false
  };
  state.checkBoxMap = {
    label: {
      position: 'after',
      value: ''
    }
  };
  state.dateMap = {
    dateFormat: ''
  };
};
const clickAddAutocomplete = () => {
  state.autocompleteFlag = true;
};
const clickAddAutocompleteCancel = () => {
  state.autocompleteFlag = false;
};
const addAutoCompleteSource = () => {
  if (state.autocompleteMap.source.includes(state.sourceValue)) {
    return;
  }
  state.autocompleteMap.source.push(state.sourceValue);
  state.sourceValue = '';
};
const closeDialog = () => {
  state.showDialog = false;
};
const clickConfirm = () => {
  emit('clickConfirm', {
    ...state.ruleForm,
    ...state.autocompleteMap,
    ...state.checkBoxMap,
    ...state.dateMap
  }, state.cellIndex);
  closeDialog();
};
defineExpose({
  openDialog
});
</script>

<template>
  <n-modal :show-icon="false" :show="state.showDialog" style="width: 60%" title="设置单元格属性" preset="dialog" @close="closeDialog()">
    <NForm
        ref="formRef"
        :model="state.ruleForm"
        :rules="state.rules"
        label-placement="left"
        label-width="120"
        require-mark-placement="left"
    >
      <h2>选择范围：[{{ state.range.start.row }}, {{ state.range.start.col }}] - [{{ state.range.end.row }}, {{ state.range.end.col }}]</h2>
      <NFormItem label="只读" path="readonly">
        <n-switch v-model:value="state.ruleForm.readonly"></n-switch>
      </NFormItem>
      <NFormItem v-if="state.ruleForm.type !== 'checkbox'" label="内容" path="content">
        <NInput :disabled="state.ruleForm.readonly" v-model:value="state.ruleForm.content" placeholder="请输入单元格内容" clearable></NInput>
      </NFormItem>
      <NFormItem label="类型" path="type">
        <n-select :disabled="state.ruleForm.readonly" v-model:value="state.ruleForm.type" placeholder="请选择类型" :options="state.typeList"></n-select>
      </NFormItem>
      <div v-if="['autocomplete', 'dropdown'].includes(state.ruleForm.type)">
        <NFormItem label="数据源">
          <NSpace>
            <NTag v-for="(item, index) in state.autocompleteMap.source" :key="index">{{item}}</NTag>
          </NSpace>
          <div class="ml2">
            <NSpace>
              <NButton @click="clickAddAutocomplete">添加</NButton>
              <NButton v-if="state.autocompleteFlag" @click="clickAddAutocompleteCancel">关闭</NButton>
              <NInput v-if="state.autocompleteFlag" class="source-input" v-model:value="state.sourceValue" placeholder="请输入数据源选项，回车键确认" @keyup.enter="addAutoCompleteSource" clearable></NInput>
            </NSpace>
          </div>
        </NFormItem>
        <NFormItem v-if="state.ruleForm.type === 'autocomplete'" label="严格模式">
          <n-switch v-model:value="state.autocompleteMap.strict"></n-switch>
        </NFormItem>
      </div>
      <div v-if="state.ruleForm.type === 'checkbox'">
        <NFormItem label="文字">
          <NInput v-model:value="state.checkBoxMap.label.value" placeholder="请输入文字" clearable></NInput>
        </NFormItem>
        <NFormItem label="文字位置">
          <n-radio-group v-model:value="state.checkBoxMap.label.position">
            <n-radio value="before">前面</n-radio>
            <n-radio value="after">后面</n-radio>
          </n-radio-group>
        </NFormItem>
      </div>
      <div v-if="state.ruleForm.type === 'date'">
        <NFormItem label="日期格式">
          <NInput v-model:value="state.dateMap.dateFormat" placeholder="请输入日期格式，格式参考: YYYY年MM月DD日" clearable></NInput>
        </NFormItem>
      </div>
    </NForm>
    <template #action>
      <n-space>
        <n-button @click="closeDialog()">关闭</n-button>
        <n-button type="primary" @click="clickConfirm">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped lang="scss">
  .ml2{
    margin-left: 8px;
  }
  .source-input{
    width: 240px;
  }
</style>
